<template>
  <div class="layout-Dynamic">
    <DynamicTable
      ref="mainTable"
      :SearchFormFields="SearchFormFields"
      :TableConfig="TableConfig"
      @selection-change="handleMultiSelect"
    >
    </DynamicTable>
    <DynamicForm ref="mainForm" :form-config="FormConfig" />
  </div>
</template>

<script>
import DynamicTable from "@/components/DynamicTableForm/Table/index.vue";
import DynamicForm from "@/components/DynamicTableForm/Form/index.vue";
export default {
  name: "DynamicTableForm",
  components: { DynamicTable, DynamicForm },
  data() {
    return {
      TableConfig: {
        list: {
          url: "/system/user/list",
          dataParam: "rows",
        },
        columns: [
          {
            label: "展开",
            prop: "content",
            type: "expand",
            visible:true
          },
          {
            label: "用户昵称",
            prop: "nickName",
            visible:true
          },
          {
            label: "部门",
            method: (row) => row.dept.deptName,
            visible:true
          },
          {
            label: "手机号码",
            prop: "phonenumber",
            visible:true
          },
          {
            label: "邮箱",
            prop: "email",
            visible:true
          },
          {
            label: "状态",
            prop: "status",
            type: "switch",
            visible:true,
            props: {
              activeValue: "0",
              inactiveValue: "1",
            },
          },
          {
            label: "备注",
            prop: "remark",
            visible:true
          },
          {
            label: "创建时间",
            prop: "createTime",
            width: 200,
            visible:true
          },
        ],
        actions: {
          multiple: [
            {
              label: "新增",
              key: "add",
              type: "primary",
              method: () => {
                this.$refs.mainForm.open()
              },
            },
            {
              label: "删除",
              key: "delete",
              type: "danger",
              method: () => {
                this.$refs.mainTable.handleDelete();
              },
            },
            {
              label: "导入",
              key: "import",
              type: "success"
            },
            {
              label: "导出",
              key: "export",
              type: "warning"
            }
          ],
          single: [
            {
              key: "delete",
              label: "删除",
              icon: "el-icon-delete",
            },
            {
              key: "edit",
              label: "编辑",
              icon: "el-icon-edit",
              method: (row) => {
                this.FormConfig.details.url = "/system/user/" + row.userId;
                this.$refs.mainForm.open()
              },
            },
          ],
        },
      },
      SearchFormFields: [
        {
          label: "用户名称",
          type: "input",
          prop: "userName",
        },
        {
          label: "手机号码",
          type: "input",
          prop: "phonenumber",
        },

        {
          label: "创建时间",
          type: "date",
          prop: "dateRange",
          props: {
            type: "daterange",
            startPlaceholder: "开始日期",
            endPlaceholder: "结束日期",
          },
        },
        {
          label: "状态",
          type: "select",
          prop: "status",
          options: [
            {
              label: "启用",
              value: "0",
            },
            {
              label: "禁用",
              value: "1",
            },
          ],
        },
      ],
      FormConfig: {
        dialogActions: {
          visible: false,
          title: "用户管理",
          width: "680px",
        },
        add: {
          url: "/system/user",
        },
        details: {
          url: null,
          method: "get",
        },
        edit: {
          url: "/system/user",
          method: "PUT",
        },
        fields: [
          {
            label: "用户昵称",
            prop: "nickName",
            type: "input",
          },
          {
            label: "部门",
            prop: "deptId",
            type: "treeselect",
            props: {
              options: [],
            },
          },
          {
            label: "手机号码",
            prop: "phonenumber",
            type: "input",
          },
          {
            label: "邮箱",
            prop: "email",
            type: "input",
          },
          {
            label: "用户性别",
            prop: "sex",
            type: "select",
            options: [
              {
                label: "男",
                value: "0",
              },
              {
                label: "女",
                value: "1",
              },
            ],
          },
          {
            label: "用户名称",
            prop: "userName",
            type: "input",
          },
          {
            label: "用户密码",
            prop: "password",
            type: "password",
          },
          {
            label: "状态",
            prop: "status",
            type: "switch",
            props: {
              activeValue: "0",
              inactiveValue: "1",
            },
            options: [
              {
                label: "启用",
                value: "0",
              },
              {
                label: "禁用",
                value: "1",
              },
            ],
          },
          {
            label: "岗位",
            prop: "postIds",
            type: "select",
            options: [],
          },
          {
            label: "角色",
            prop: "roleIds",
            type: "select",
            options: [],
          },
          {
            label: "备注",
            prop: "remark",
            type: "textarea",
            colSpan: 24,
          },
          {
            label: "富文本1",
            prop: "content",
            type: "editor",
            colSpan: 24,
          },
        ],
      },
    };
  },
  mounted() {
  },

  methods: {
    handleMultiSelect(val) {},
    queryList(params) {
      this.$refs.mainTable.getList(this.addDateRange(params, params.dateRange));
    },
  },
};
</script>
